<template>
	<view style="padding: 30rpx;">
		<view style="text-align: center;margin-bottom: 20rpx;">店铺优惠</view>
		<view v-for="item in data" :key="item.activity.activityId">
			<view class="orange">
				<text style="margin-right: 10rpx;">{{ item.activity.name }}</text>
				<text v-for="(rule,ruleIndex) in item.activity.ruleList" :key="rule.id">
					满{{ rule.num }}件{{ rule.discount }}折
					<text v-if="ruleIndex<item.activity.ruleList.length-1" style="margin-right: 4rpx;">,</text>
				</text>
			</view>
			<view style="display: flex;align-items: center;flex-wrap: wrap;font-size: 24rpx;">
				<view v-for="product in item.products" :key="item.id"
					style="background-color: #f5f5f5;padding: 20rpx;margin: 20rpx 0;border-radius: 10rpx;width: 200rpx;">
					<image style="width: 160rpx;height: 160rpx;" :src="product.thumbnail" />
					<view style="display: flex;color: #909090;">
						<view style="flex: 1;">¥{{ product.originalPrice| money }}</view>
						<view>x {{ product.num }}</view>
					</view>
					<view style="text-overflow: ellipsis;overflow:hidden;white-space: nowrap;">
						{{ product.name }}
					</view>
					<view class="orange">优惠¥{{ getDiscount(product) | money}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'marketingDiscount',
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			getDiscount(product) {
				return product.originalPrice.subtractFloat(product.price)
			}
		}
	}
</script>

<style lang="scss">
	.orange {
		color: #ff7200;
	}
</style>
